<template>
    <div>
        <div class="table-operator">
            <a-button type="primary" icon="plus" @click="add">新增</a-button>
        </div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon" />
            已选择
            <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>
            项
            <a style="margin-left: 24px"  @click="onClearSelected">清空</a>
        </div>
        <a-table
            size="middle"
            bordered
            row-key="id"
            :columns="columns"
            :data-source="data_"
            :pagination="ipagination"
            :loading="loading"
            :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange"
        >
            <template slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-dropdown>
                <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
                <a-menu slot="overlay">
                <a-menu-item>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a >删除</a>
                    </a-popconfirm>
                </a-menu-item>
                </a-menu>
            </a-dropdown>
            </template>
        </a-table>
        <!--弹窗区域  -->
        <a-modal
            :width="800"
            title="新增"
            :visible.sync="editModalVisible"
            @cancel="handleCancleDbSync"
            >
            <template slot="footer">
                <a-button @click="handleCancleDbSync">
                关闭
                </a-button>
                <a-button type="primary" @click="handleDbSync" >确定</a-button>
            </template>
            <div class="table-page-search-wrapper">
              <a-form-model layout="horizontal" ref="ruleForm" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row :gutter="24">
                  <a-col :xl="24" :lg="24" :md="24" :sm="24" >
                    <a-form-model-item label="表单类型" prop="formType">
                      <a-select v-model="formData.formType" placeholder="请选择表单类型">
                        <a-select-option :value="0">Online表单</a-select-option>
                        <a-select-option :value="1">自定义表单(设计器)</a-select-option>
                        <a-select-option :value="2">自定义开发</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="24" :lg="24" :md="24" :sm="24">
                    <a-form-model-item label="表名" prop="formTableName">
                      <a-input v-model="formData.formTableName"  placeholder="请输入表名"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="24" :lg="24" :md="24" :sm="24">
                    <a-form-model-item label="唯一编码" prop="relationCode">
                      <a-input v-model="formData.relationCode" placeholder="请输入唯一编码"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="24" :lg="24" :md="24" :sm="24" >
                    <a-form-model-item label="流程状态列名" prop="flowStatusCol">
                      <a-input v-model="formData.flowStatusCol" placeholder="请输入流程状态列名"/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="24" :lg="24" :md="24" :sm="24" >
                    <a-form-model-item label="标题表达式" prop="titleExp">
                      <a-input v-model="formData.titleExp"  placeholder="请输入标题表达式"/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'businessRelation',
  mixins: [JeecgListMixin],
  data() {
    return {
      url: {
        list: '/online/cgform/head/list',
        edit: 'diagram/diagramConfiguration/edit',
        add: 'diagram/diagramConfiguration/add'
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '唯一编码',
          align: 'center',
          dataIndex: 'relationCode'
        },
        {
          title: '表名/自定义表单CODE',
          align: 'center',
          dataIndex: 'formTableName'
        },
        {
          title: '表单类型',
          align: 'center',
          dataIndex: 'formType'
        },
        {
          title: '业务标题表达式',
          align: 'center',
          dataIndex: 'titleExp'
        },
        {
          title: '流程状态列名',
          align: 'center',
          dataIndex: 'flowStatusCol'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data_: [{}],
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      editModalVisible: false,
      formData: {},
      newFormData: {// 新增用数据
        'relationCode': '',
        'formTableName': '',
        'formType': 0,
        'titleExp': '',
        'flowStatusCol': 'bpm_status'
      },
      rules: {
        relationCode: [
          { required: true, message: '请输入唯一编码', trigger: 'change' }
        ],
        formTableName: [
          { required: true, message: '表名/自定义表单CODE', trigger: 'change' }
        ],
        flowStatusCol: [
          { required: true, message: '请输入流程状态列名', trigger: 'change' }
        ],
        titleExp: [
          { required: true, message: '请输入业务标题表达式', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    add() {
      this.formData = JSON.parse(JSON.stringify(this.newFormData))
      this.editModalVisible = true
    },
    handleCancleDbSync() { // 关闭
      this.editModalVisible = false
    },
    handleDbSync() { // 弹窗点击确定
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.updateData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateData(params) { // 保存提交数据
      if (this.formData.id) {
        putAction(this.url.edit, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      } else {
        postAction(this.url.add, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.editModalVisible = false
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      }
    }
  }
}
</script>
